<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>预约</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script src="js/jquery-3.4.1.min.js"></script>
  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <link rel="stylesheet" href="css/otherstyle.css">
  <link rel="stylesheet" href="css/bg.css">
  <script src="js/other.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=175868a7734b73cd32d4acc8464c509f"></script>
    <link rel="stylesheet" href="css/map.css">
 
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light">
			<a class="navbar-brand" href="index.html"><img src="images/logo.png" width="70%"></a>
			<button class="navbar-toggler type=" button data-toggle="collapse" data-target="#navbarSupportedContent"
				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="nn navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link" href="zhekou.html">今日折扣</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="photo.html">照片墙</a>
          </li>
          <li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
							data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							菜单
						</a>
						<div class="dropdown-menu " aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="#">饮品</a>
							<a class="dropdown-item" href="#">糕点</a>
							<a class="dropdown-item" href="#">小吃</a>
						</div>
					</li>
				</ul>
				<form class="form-inline my-2 my-lg-0" action="reaservation.html">
					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">预约</button>
				</form>
			</div>
		</nav>


    <div id="d1">
      <div class="col-md-12 text-center">
        <span>Give Us A Call Or Drop Us A Line</span>
        <h1>GET IN TOUCH</h1>
      </div>
    </div>
  </header>

  <section class="section6 container-fluid">
    <div class="h">
      <h1>Please leave the appointment information</h1>
    </div>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="d1 col-xs-12 col-md-3">
        <h1>Contact Map</h1>
        <p>SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT VOLUPTATEM ACCUSANTIUM DOLOREMQUE LAUDANTIUM, TOTAM REM APERIAM.
          <br><br>
          JL.Kemacetan timur no.23. block.Q3<br>
          Jakarta-Indonesia<br><br>
          +6221 888 88891</p>
        <div id="container"></div>
        <div class="info"></div>
      </div>
      <div class="col-md-1"></div>
      <div class="d2 col-xs-12 col-md-4">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
          <el-form-item label="姓名">
            <el-input v-model="sizeForm.name" placeholder="请输入预约人姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="sizeForm.phone" placeholder="请输入预约人电话"></el-input>
          </el-form-item>
          <el-form-item label="人数">
            <el-select v-model="sizeForm.region" placeholder="请选择人数">
              <el-option label="1" value="shanghai"></el-option>
              <el-option label="2" value="beijing"></el-option>
              <el-option label="3" value="beijing"></el-option>
              <el-option label="4" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;">
              </el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="茶点预约">
            <el-checkbox-group v-model="sizeForm.type">
              <el-checkbox-button label="茶" name="type"></el-checkbox-button>
              <el-checkbox-button label="糕点" name="type"></el-checkbox-button>
              <el-checkbox-button label="小吃" name="type"></el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="停车位">
            <el-radio-group v-model="sizeForm.resource" size="medium">
              <el-radio border label="需要"></el-radio>
              <el-radio border label="不需要"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="open">立即预约</el-button>
            <el-button onclick="cancel()">取消</el-button>
          </el-form-item>
        </el-form>

        
      </div>
      <div class="col-md-2"></div>
    </div>
  </section>

  <footer >
		<div class="f1">
			<div>
				<h6>关于中国</h6>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;被视为亚洲地区重要地域大国，
					也被视为潜在超级大国。是世界上人口最多的国家，
					约有13.9亿人，同时也是一个多民族国家，共有已确认的民族56个，其中汉族人口占91.51%。
					以普通话和规范汉字为国家通用语言文字，少数民族地区可使用自己民族的语言。
				</p>
				<br>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国地势西高东低而呈现三级阶梯分布，
					大部分地区属于温带、副热带季风气候，
					地理景致与气候型态丰富多样，有冰川、丹霞、黄土、沙漠、喀斯特等多种地貌，
					北方有干草原和荒漠，南方有热带雨林，西部和西南边境则有天山山脉、
					喀喇昆仑山脉和喜马拉雅山脉。
				</p>
			</div>
			<div>
				<h6>最近的帖子</h6>
				<a href="#">&gt;&nbsp;强烈推荐大家去这家巧克力下午茶店</a>
				<hr>
				<a href="#">&gt;&nbsp;强烈推荐大家去这家巧克力下午茶店</a>
				<hr>
				<a href="#">&gt;&nbsp;强烈推荐大家去这家巧克力下午茶店</a>
				<hr>
				<a href="#">&gt;&nbsp;强烈推荐大家去这家巧克力下午茶店</a>
				<hr>

			</div>
			<div>
				<h6>我们的图片</h6>
				<img src="images/footer1.jpg" alt="">
				<img src="images/footer2.jpg" alt="">
				<img src="images/footer3.jpg" alt="">
				<img src="images/footer4.jpg" alt="">
				<img src="images/footer5.jpg" alt="">
				<img src="images/footer6.jpg" alt="">
				<img src="images/footer2.jpg" alt="">
				<img src="images/footer1.jpg" alt="">
				<img src="images/footer3.jpg" alt="">
			</div>
			<div>
				<h6>标签墙</h6>
				<a href="#">animals</a>
				<a href="#">cooking</a>
				<a href="#">countries</a>
				<a href="#">city</a>
				<a href="#">children</a>
				<a href="#">home</a>
				<a href="#">likes</a>
				<a href="#">photo</a>
				<a href="#">link</a>
				<a href="#">law</a>
				<a href="#">shopping</a>
				<a href="#">skate</a>
				<a href="#">scholl</a>
				<a href="#">video</a>
				<a href="#">travel</a>
				<a href="#">images</a>
				<a href="#">love</a>
				<a href="#">lists</a>
				<a href="#">makeup</a>
				<a href="#">media</a>
				<a href="#">password</a>
				<a href="#">pagination</a>
				<a href="#">wildlife</a>
			</div>
		</div>
		<div class="f2">Copyright © 2020 重庆师范大学北大青鸟 by-万锐</div>
	</footer>

  <script>
    // Vue
    let vue = new Vue({
      el: '.d2',
      data() {
        return {
          sizeForm: {
            name: '',
            phone: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
        };
      },
      methods: {
      open() {
        this.$alert('预约成功', '预约结果', {
          confirmButtonText: '确定',
        });
      }
    }
    })


  </script>
  <script src="js/map.js"></script>
</body>

</html>